﻿@{
    ViewBag.Title = "Statistics48HhyUser";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using ST = EmoneyWeiXinCommon.StringTools;
<script type="text/javascript" src="@ST.GetStaticFile("Scripts/highcharts.js")"></script>
<script type="text/javascript" src="@ST.GetStaticFile("My97DatePicker/WdatePicker.js")"></script>

<div class="right">
    <h3>48小时活跃用户</h3>
    <!--manage-->
    <div class="manage">
        <!--manage_top-->
        <div class="manage_top">
            <ul class="manage_top_ul">
                <li class="manage_top_A">
            </ul>
            <div class="manage_register">
                @{
                    DateTime today = DateTime.Now.AddDays(1);
                    DateTime yesterday = today.AddDays(-1);
                }
                <p><span>发布时间：</span><input type="text" class="manage_register_text" onfocus="WdatePicker()" id="txt_startTime" value="@yesterday.ToString("yyyy-MM-dd")"><span class="manage_register_font">至</span><input type="text" class="manage_register_text" onfocus="WdatePicker()" id="txt_endTime"  value="@today.ToString("yyyy-MM-dd")"/></p>
            </div>
            <p class="manage_add">
                <a href="javasrcipt:void(0)" id="btnSearch">查询</a>
                <a class="manage_add_font" href="#">重置</a>
            </p>
        </div>
        <!--manage_top end-->
        <p class="manage_line"></p>
        <!--manage_bottom-->
        <div class="manage_bottom" style="overflow-x: scroll">
            <!--manage_chart-->
            <div class="manage_chart">
                <div id="container" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
            </div>
            <!--manage_chart end-->
            <!--manage_bottom_title-->
            <div class="manage_bottom_title">
                <p>当前活跃人次：<span class="red" id="spDqhyrc">0</span>人</p>
            </div>
            <!--manage_bottom_title end-->
            <table border="0" cellpadding="0" cellspacing="0" width="100%" id="dataTable">
                <tr>
                    <th><span>日期</span></th>
                    <th><span>0</span></th>
                    <th><span>1</span></th>
                    <th><span>2</span></th>
                    <th><span>3</span></th>
                    <th><span>4</span></th>
                    <th><span>5</span></th>
                    <th><span>6</span></th>
                    <th><span>7</span></th>
                    <th><span>8</span></th>
                    <th><span>9</span></th>
                    <th><span>10</span></th>
                    <th><span>11</span></th>
                    <th><span>12</span></th>
                    <th><span>13</span></th>
                    <th><span>14</span></th>
                    <th><span>15</span></th>
                    <th><span>16</span></th>
                    <th><span>17</span></th>
                    <th><span>18</span></th>
                    <th><span>19</span></th>
                    <th><span>20</span></th>
                    <th><span>21</span></th>
                    <th><span>22</span></th>
                    <th><span>23</span></th>
                </tr>

            </table>
        </div>
        <!--manage_bottom end-->
    </div>
    <!--manage end-->
</div>


<script type="text/javascript">
    var weixinid = "";
    var pageIndex = 1;
    var pageSize = 10;
    var pageCount = 1;
    var totalCount = 0;
    var viewBagWeixinId = "@ViewBag.weixinid";

    var getUserMenuUrl = "@ST.GetTrendsFile("BaseConfiguration/WeixinUserMemu")" + "?random=" + Math.random();
    var getTJBusinessDataUrl = "@ST.GetTrendsFile("TJBusiness/Get48HHyData")";


    $(document).ready(function () {
        createMemu();
        initEvent();
         get48HHyData();
       // render(result);

    });




    function getContentMemu() {
        $(".manage_top_ul .manage_top_A").each(function () {
            weixinid = $(this).attr("typeid");
        })
    }
    //创建labs
    function createMemu() {
        $.ajax({
            type: "get",
            url: getUserMenuUrl,
            async: false,
            data: { weixinid: viewBagWeixinId },
            dataType: "html",
            success: function (result) {
                $(".manage_top_ul").html(result);
                $(".manage_top_ul li").click(function () {
                    $(".manage_top_ul li").removeClass("manage_top_A");
                    $(this).addClass("manage_top_A");
                    getContentMemu();
                    get48HHyData();
               

                })
                getContentMemu();
            }
        });
    }




    //重画页面
    function render(dataResult) {

        //totalCount = dataResult.totalCount;
        //var data = dataResult.data;

        var data = dataResult.dataList;


        var itemArry = [];   //日期数组

        var jzzArry = [];

        var $dataTable = $("#dataTable"); //获取到显示数据的表格
        $dataTable.find("tr:gt(0)").remove();
        //需要实现行转列
        if (data.length > 0) {
            var erWeiarry = [];  //定义一个二维数组
            var tempDate = data[0].tradeDate.substring(5, 10);
            var yiWeiArry = [];
            var dateArry = [];
            dateArry.push(tempDate);

            for (var i = 0; i < data.length; i++) {
                if (data[i].tradeDate.substring(5, 10) == tempDate) {
                    yiWeiArry.push({ H: data[i].TradeHour, value: data[i].HyUserCount });
                } else {
                    erWeiarry.push(yiWeiArry);
                    yiWeiArry = [];
                    yiWeiArry.push({ H: data[i].TradeHour, value: data[i].HyUserCount });
                    tempDate = data[i].tradeDate.substring(5, 10);
                    dateArry.push(tempDate);
                }
                if (i == data.length - 1) {
                    erWeiarry.push(yiWeiArry);
                }

            }

            for (var i = 0; i < dateArry.length; i++) {
                $dataTable.append(createDataRow(dateArry[i], erWeiarry[i]));
            }


            //获取到今天的数据,显示到图标上
            var hchartitemArray = [];
            var hchartDataArray = [];
            var todayDateArry = erWeiarry[0];
            for (var i = 0; i < todayDateArry.length; i++) {
                hchartitemArray.push(todayDateArry[i].H + ":00");
                hchartDataArray.push(todayDateArry[i].value);
            }
            setHighCharts(hchartitemArray, hchartDataArray);
            $("#spDqhyrc").text(hchartDataArray[hchartDataArray.length - 1]);
        }
        else {
            setHighCharts([], []);
        }

    }

    function createDataRow(date, dataAryy) {
        var $newRow = $("<tr></tr>");
        $newRow.append("<td>" + date + "</td>");
        var j = 0;
        for (var i = 0; i < 24 ; i++) {
            if (j < dataAryy.length && i == dataAryy[j].H) {
                var $newTd = $("<td>" + dataAryy[j].value + "</td>");
                $newRow.append($newTd);
                j++;
            } else {
                var $newTd = $("<td>" + 0 + "</td>");
                $newRow.append($newTd);
            }
        }
        return $newRow;
    }


    //获取数据
    function get48HHyData() {
        var startTime = $("#txt_startTime").val();
        var endTime = $("#txt_endTime").val();
        var postData = { startTime: startTime, endTime: endTime, weixinID: weixinid };
        //var dataResult;
        $.ajax({
            type: "post",
            url: getTJBusinessDataUrl,
            data: postData,
            dataType: "json",
            success: function (result) {
                //dataResult = result;
                render(result);
                //alert(dataResult);
            }
        });
       // return dataResult;
    }

    function initEvent() {
        $("#btnSearch").click(function () {
             get48HHyData();
            //render(result);
        });
    }
</script>

@*图标相关*@
<script type="text/javascript">

    function setHighCharts(itemArry, dataArry) {
        $('#container').highcharts({
            title: {
                text: null
            },
            subtitle: {
                text: null
            },
            xAxis: {
                categories: itemArry
            },
            yAxis: {
                title: {
                    text: null
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function () {
                    var s = '<b>' + this.x + '</b>';
                    $.each(this.points, function () {
                        s += '<br/>' + this.series.name + ': ' +
                            this.y;
                    });

                    return s;
                },
                shared: true
            },
            series: [{
                name: '活跃用户',
                color: '#666666',
                data: dataArry
            }],
            credits: {
                enabled: false
            },
            exporting: {
                enabled: false
            }
        });

    }

</script>
